<template>
    
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-alert
      title="添加商品信息"
      type="info"
      center
      show-icon
      :closable="false"
      effect="dark"
    >
    </el-alert>
    <!-- 步骤条 -->
    <el-steps :active="active - 0" finish-status="success">
      <el-step title="基本信息"></el-step>
      <el-step title="商品参数"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="商品图片"></el-step>
      <el-step title="商品内容"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>
    <!-- 标签页 -->
    <el-tabs
      v-model="active"
      :tab-position="tabPosition"
      :before-leave="beforeTab"
      @tab-click="tabClicked"
    >
      <el-tab-pane label="基本信息" name="0">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-position="top"
        >
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" prop="price">
            <el-input v-model="ruleForm.price"></el-input>
          </el-form-item>
          <el-form-item label="商品重量" prop="weight">
            <el-input v-model="ruleForm.weight"></el-input>
          </el-form-item>
          <el-form-item label="商品数量" prop="num">
            <el-input v-model="ruleForm.num"></el-input>
          </el-form-item>
          <el-form-item label="商品分类" prop="sort">
            <el-cascader
              v-model="ruleForm.value"
              :options="options"
              expand-trigger="hover"
              :props="cateProps"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <!-- 商品参数 -->
      </el-tab-pane>
      <el-tab-pane label="商品参数" name="1">
        <el-form-item
          :label="item.attr_name"
          v-for="item in manytabData"
          :key="item.attr_id"
        >
          <el-checkbox-group v-model="item.attr_vals" size="small">
            <el-checkbox
              :label="ite"
              border
              v-for="(ite, ind) in item.attr_vals"
              :key="ind"
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-tab-pane>
      <el-tab-pane label="商品属性" name="2">配置管理</el-tab-pane>
      <el-tab-pane label="商品图片" name="3">角色管理</el-tab-pane>
      <el-tab-pane label="商品内容" name="4">
        <el-button>添加商品</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { categories } from "../../api/user";
export default {
  name: "",
  data() {
    return {
      active: "",
      tabPosition: "left",
      ruleForm: {
        name: "",
        price: "",
        weight: "",
        num: "",
        value: [],
      },
      options: [],
      manytabData: [],
      cateProps: {
        label: "cat_name",
        value: "cat_id",
        children: "children",
      },
      rules: {
        name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
        weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" },
        ],
        num: [{ required: true, message: "请输入商品数量", trigger: "blur" }],
        sort: [{ required: true, message: "请选择商品分类", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getList();
  },
  computed: {},
  methods: {
    //   获取数据
    async getList() {
      const { data: res } = await categories();
      // console.log(res);
      if (res.meta.status == 200) {
        this.$message.success(res.meta.msg);
        this.options = res.data;
      } else {
        this.$message.error(res.meta.msg);
      }
    },
    // 商品分类没有孙子就啥都没有
    handleChange() {
      if (this.ruleForm.value.length !== 3) {
        this.ruleForm.value = [];
      }
    },
    // 商品分类没有孙子报错
    beforeTab(activeName, oldActiveName) {
      if (oldActiveName === "0" && this.ruleForm.value.length !== 3) {
        this.$message.error("请先选择商品分类!");
        return false;
      }
    },
    // 获取商品参数数据

    tabClicked() {
      //证明访问的是动态参数面板

      if (this.active === "1") {
        this.$axios

          .get(`categories/${this.cateId}/attributes`, {
            params: { sel: "many" },
          })

          .then((res) => {
            console.log(res);

            if (res.meta.status == 200) {
              console.log(res.data);

              res.data.forEach((item) => {
                //三元用算符

                item.attr_vals =
                  item.attr_vals.length === 0 ? [] : item.attr_vals.split(" ");

                this.manytabData = res.data;
              });
            }
          });
      } else if (this.active === "2") {
        this.$axios

          .get(`categories/${this.cateId}/attributes`, {
            params: { sel: "only" },
          })

          .then((res) => {
            if (res.meta.status == 200) {
              // console.log(res.data)

              this.onlyTabdata = res.data;

              return this.$message.success("获取动态参数列表成功!");
            } else {
              return this.$message.error("获取动态参数列表失败!");
            }
          });
      }
    },
  },
};
</script>

<style scoped>
.el-steps {
  margin-top: 20px;
}
</style>
